<template>
  <div>
    <div class="block">
      <el-timeline>
        <el-timeline-item :timestamp="log.createdTime" placement="top" :key="log.id" v-for="log in logs">
          <el-card>
            <div>
              {{viewName}} {{log.logContent}}
              <el-popconfirm title="确定要删除这条动态吗？" icon="el-icon-info" icon-color="red" @confirm="deleteLogs(log.id)" :data-id='log.id'>
                <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" style="float: right;" :data-id='log.id' circle
                  v-if="isOwn">
                </el-button>
              </el-popconfirm>

            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <el-pagination class="mpage" background layout="prev, pager, next" :current-page="currentPage" :page-size="pageSize" :total="total"
        @current-change="page">
      </el-pagination>
    </div>
  </div>
</template>


<script>
export default {
  data () {
    return {
      logs: {},
      currentPage: 1,
      total: 0,
      pageSize: 10,
      viewsId: 0,
      viewName: "",
      isOwn: false
    }
  },
  methods: {
    page (currentPage) {
      const _this = this
      _this.$axios.get("/logs/get/" + _this.viewsId + "?currentPage=" + currentPage).then(res => {
        console.log(res.data.data)
        _this.logs = res.data.data.records
        _this.currentPage = res.data.data.current
        _this.total = res.data.data.total
        _this.pageSize = res.data.data.size
        // 获取主页的个人信息
        _this.$axios.get("/user/" + _this.viewsId).then(res => {
          _this.viewName = res.data.data.username;
        });
      })
    },
    deleteLogs (id) {
      const _this = this;
      _this.$axios.delete("/logs/delete/" + id, {
        headers: {
          "Authorization": localStorage.getItem("token")
        },
      }).then(res => {
        console.log(res.data);
        if (res.data.code == 200) {
          _this.page(1);
          _this.$message.success("删除成功");
        }
      })
    }
  },
  created () {
    const _this = this
    _this.viewsId = this.$route.params.id;
    if (sessionStorage.getItem('userInfo') == "{}")
      console.log("Logs Not Login")
    else {
      _this.isOwn = (_this.viewsId == _this.$store.getters.getUser.id)
    }
    this.page(1)
  }
}
</script>

<style scoped>
.mpage {
  margin: 0 auto;
  text-align: center;
}
</style>